<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
			<form>
			<label>用户名</label>
			<input type="text"  onblur="checkUser()" id="username"/>
			<p id="c"></p>
			<label>密码</label>
			<input type="password" name="w"  onblur="n()" id="psd" />
			<p id="g"></p>
			<label>请再次输入密码</label>
			<input type="password" name="r"  onblur="y()" id="repsd"/>
			<p id="s"></p>
			<label>邮箱</label>
			<input type="text"  onblur="t()" id="mailbox"/>
			<p id="a"></p>
		</form>
		<script>
			//1.用户名 要求 长度>5 <12
			function checkUser(){
				var user=document.getElementById('username').value;
				var p=document.getElementById('c');
				console.log(user.length)
				if(!(5<user.length&&user.length<12)){
					p.innerHTML='长度错误';
				}

			}
		
			//2.密码 要求:银行卡密码要求 6位纯数字
			function n(){
				var  psd=document.getElementById('psd').value;
				var num=/^\d{6}$/;
				var p=document.getElementById('g');
				if(num.test(psd)){
					p.innerHTML='格式正确';
				}else{
					p.innerHTML='兄弟，错了';
				}
			}
				//3.邮箱 要求 @  . @要在点前边
			function t(){
				var mlx=document.getElementById('mailbox');
				var p=document.getElementById('a');
				var o=document.getElementById('mailbox').value;
				var x=o.indexOf('@');
				var y=o.indexOf('.');
				if(x > 0 && y > 0 && x < y){
					p.innerHTML='格式正确';
				}else{
					p.innerHTML='格式错误，请重新输入';
				}
			}
			//4.重复密码 要求 必须和密码一致 不能为空
			function y(){
				var  psd=document.getElementById('psd').value;
			var  repsd=document.getElementById('repsd').value;
			var p=document.getElementById('s');
			if(psd==repsd){
				p.innerHTML='你输入的正确';
			}else{
				p.innerHTML='你输入的有误';
			}
			}
			
		</script>
	</body>
</html>
